<template>
  <a-modal
    v-model:open="visible"
    title="押金"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="deposit-modal">
      <!-- 账单信息 -->
      <div class="bill-info">
        <h4>账单信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">顾客姓名:</span>
            <span class="value">{{ bill?.ownerName }}</span>
          </div>
          <div class="info-item">
            <span class="label">宠物名称:</span>
            <span class="value">{{ bill?.petName }}</span>
          </div>
          <div class="info-item">
            <span class="label">账单金额:</span>
            <span class="value amount"
              >¥{{ bill?.totalAmount.toFixed(2) }}</span
            >
          </div>
        </div>
      </div>

      <!-- 押金信息 -->
      <div class="deposit-form">
        <h4>押金信息</h4>
        <a-form :model="formData" layout="vertical">
          <a-form-item label="押金金额" required>
            <a-input-number
              v-model:value="formData.amount"
              :min="0"
              :precision="2"
              style="width: 100%"
              placeholder="请输入押金金额"
            />
          </a-form-item>

          <a-form-item label="支付方式" required>
            <a-radio-group v-model:value="formData.paymentMethod">
              <a-radio value="alipay">支付宝</a-radio>
              <a-radio value="wechat">微信支付</a-radio>
              <a-radio value="cash">现金</a-radio>
              <a-radio value="card">银行卡</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="操作人员" required>
            <a-select
              v-model:value="formData.operator"
              placeholder="请选择操作人员"
              style="width: 100%"
            >
              <a-select-option value="曾前台">曾前台</a-select-option>
              <a-select-option value="李收银">李收银</a-select-option>
              <a-select-option value="王收银">王收银</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="备注">
            <a-textarea
              v-model:value="formData.remarks"
              :rows="3"
              placeholder="请输入备注信息"
            />
          </a-form-item>
        </a-form>
      </div>

      <!-- 第三方支付区域 -->
      <div
        v-if="
          formData.paymentMethod === 'alipay' ||
          formData.paymentMethod === 'wechat'
        "
        class="payment-area"
      >
        <h4>
          {{ formData.paymentMethod === 'alipay' ? '支付宝' : '微信支付' }}
        </h4>
        <div class="qr-code-area">
          <div class="qr-code">
            <div class="qr-placeholder">
              <div class="qr-icon">
                {{ formData.paymentMethod === 'alipay' ? '💰' : '💳' }}
              </div>
              <div class="qr-text">扫码支付</div>
              <div class="qr-amount">
                ¥{{ formData.amount?.toFixed(2) || '0.00' }}
              </div>
            </div>
          </div>
          <div class="payment-status">
            <a-tag
              :color="
                paymentStatus === 'waiting'
                  ? 'orange'
                  : paymentStatus === 'success'
                    ? 'green'
                    : 'red'
              "
            >
              {{ getPaymentStatusText() }}
            </a-tag>
          </div>
        </div>
      </div>

      <!-- 刷脸支付区域 -->
      <div v-if="formData.paymentMethod === 'face'" class="face-payment-area">
        <h4>刷脸支付</h4>
        <div class="face-payment">
          <div class="face-camera">
            <div class="camera-placeholder">
              <div class="camera-icon">📷</div>
              <div class="camera-text">请将脸部对准摄像头</div>
            </div>
          </div>
          <div class="face-status">
            <a-tag
              :color="
                faceStatus === 'scanning'
                  ? 'blue'
                  : faceStatus === 'success'
                    ? 'green'
                    : 'red'
              "
            >
              {{ getFaceStatusText() }}
            </a-tag>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';

import { message } from 'ant-design-vue';

// 接口定义
interface BillItem {
  id: string;
  name: string;
  specification: string;
  unit: string;
  quantity: number;
  unitPrice: number;
  discountedPrice: number;
  total: number;
  salesPerson: string;
  servicePerson: string;
  category: string;
  date: string;
}

interface Bill {
  id: string;
  petName: string;
  petId: string;
  ownerName: string;
  ownerPhone: string;
  createTime: string;
  status: 'unsettled' | 'onAccount' | 'settled' | 'refund';
  totalAmount: number;
  items: BillItem[];
}

interface Props {
  visible: boolean;
  bill: Bill | null;
}

interface Emits {
  (e: 'update:visible',value: boolean): void;
  (e: 'success'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 响应式数据
const formData = ref({
  amount: 0,
  paymentMethod: 'cash',
  operator: '',
  remarks: '',
});

const paymentStatus = ref<'waiting' | 'success' | 'failed'>('waiting');
const faceStatus = ref<'scanning' | 'success' | 'failed'>('scanning');

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

// 方法
const handleOk = () => {
  if (!formData.value.amount || formData.value.amount <= 0) {
    message.warning('请输入押金金额');
    return;
  }

  if (!formData.value.operator) {
    message.warning('请选择操作人员');
    return;
  }

  // 模拟支付处理
  if (
    formData.value.paymentMethod === 'alipay' ||
    formData.value.paymentMethod === 'wechat'
  ) {
    simulatePayment();
  } else if (formData.value.paymentMethod === 'face') {
    simulateFacePayment();
  } else {
    // 现金或银行卡直接成功
    handleSuccess();
  }
};

const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};

const simulatePayment = () => {
  paymentStatus.value = 'waiting';
  message.info('正在等待扫码支付...');

  // 模拟支付过程
  setTimeout(() => {
    paymentStatus.value = 'success';
    message.success('支付成功');
    handleSuccess();
  }, 3000);
};

const simulateFacePayment = () => {
  faceStatus.value = 'scanning';
  message.info('正在扫描人脸...');

  // 模拟刷脸过程
  setTimeout(() => {
    faceStatus.value = 'success';
    message.success('刷脸支付成功');
    handleSuccess();
  }, 2000);
};

const handleSuccess = () => {
  message.success('押金操作成功');
  emit('success');
  emit('update:visible', false);
  resetForm();
};

const resetForm = () => {
  formData.value = {
    amount: 0,
    paymentMethod: 'cash',
    operator: '',
    remarks: '',
  };
  paymentStatus.value = 'waiting';
  faceStatus.value = 'scanning';
};

const getPaymentStatusText = () => {
  const statusMap = {
    waiting: '等待支付',
    success: '支付成功',
    failed: '支付失败',
  };
  return statusMap[paymentStatus.value];
};

const getFaceStatusText = () => {
  const statusMap = {
    scanning: '扫描中',
    success: '支付成功',
    failed: '支付失败',
  };
  return statusMap[faceStatus.value];
};

// 监听账单变化，设置默认押金金额
watch(
  () => props.bill,
  (newBill) => {
    if (newBill) {
      formData.value.amount = newBill.totalAmount;
    }
  },
  { immediate: true },
);
</script>

<style scoped>
.deposit-modal {
  padding: 16px 0;
}

.bill-info,
.deposit-form,
.payment-area,
.face-payment-area {
  margin-bottom: 24px;
}

.bill-info h4,
.deposit-form h4,
.payment-area h4,
.face-payment-area h4 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.info-item .label {
  font-size: 14px;
  color: #666;
}

.info-item .value {
  font-weight: 500;
  color: #333;
}

.info-item .value.amount {
  font-weight: bold;
  color: #ff4d4f;
}

.qr-code-area,
.face-payment-area {
  text-align: center;
}

.qr-code {
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin-bottom: 16px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
}

.qr-placeholder {
  text-align: center;
}

.qr-icon {
  margin-bottom: 8px;
  font-size: 48px;
}

.qr-text {
  margin-bottom: 4px;
  color: #666;
}

.qr-amount {
  font-size: 18px;
  font-weight: bold;
  color: #ff4d4f;
}

.payment-status,
.face-status {
  margin-top: 12px;
}

.face-camera {
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 150px;
  margin-bottom: 16px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
}

.camera-placeholder {
  text-align: center;
}

.camera-icon {
  margin-bottom: 8px;
  font-size: 48px;
}

.camera-text {
  font-size: 14px;
  color: #666;
}
</style>
